<!--
* @FileDescription: 游标及卡尺工具下的弹框组件
* @Author: yuec621@outlook.com
* @Date: 2024-11-28 12:37:50
* @LastEditors: Please set LastEditors
* @LastEditTime: 2024-12-30 12:37:50
-->
<template>
    <div class="youBox">
        <div class="youBoxList" v-for="item in youBoxList">
            <span>{{ item.place }}
                </span>
            <span style="font-weight: 700;" :style="{color:item.maxValue!='最大值'?item.maxColor:'',
                fontSize:item.maxValue!='最大值'?'20px':'14px'
            }">
                {{ item.maxValue }}<i style="font-style: normal;font-size: 12px;color: rgba(62, 70, 79, 1);" v-if="item.unit">{{ item.unit }}</i><br />
                <i v-if="item.maxValue!='最大值'&&item.dataTime"
                    style="font-size: 12px;color: rgba(62, 70, 79, 1);font-style: normal;">
                    {{ dayjs(item.dataTime).format('YYYY-MM-DD HH:mm:ss') }}</i></span>

            <span style="font-weight: 700;" :style="{color:item.maxValue!='最小值'?item.minColor:'',
                fontSize:item.minValue!='最小值'?'20px':'14px'
            }">
                {{ item.minValue }}<i style="font-style: normal;font-size: 12px;color: rgba(62, 70, 79, 1);" v-if="item.unit">{{ item.unit }}</i><br />
                <i v-if="item.minValue!='最小值'&&item.dataTime"
                    style="font-size: 12px;color: rgba(62, 70, 79, 1);font-style: normal;">
                    {{ dayjs(item.dataTime).format('YYYY-MM-DD HH:mm:ss') }}</i></span>
            <span style="font-weight: 700;" :style="{color:item.avgValue!='平均值'?item.avgColor:'',
                fontSize:item.avgValue!='平均值'?'20px':'14px'
            }">{{ item.avgValue }}<i style="font-style: normal;font-size: 12px;color: rgba(62, 70, 79, 1);" v-if="item.unit">{{ item.unit }}</i></span>
        </div>
    </div>
</template>
<script setup>
    import {
        computed,
        reactive,
        watchEffect
    } from 'vue';
    import axios from "@/utils/request"
    import {
        table_headers
    } from '@/components/commonCom/table_headers';
    import {
        searchchannelNoList
    } from '@/api/config'
    import useUserStore from "@/store/modules/user";
    const {
        proxy
    } = getCurrentInstance();
    import dayjs from 'dayjs'
    const userStore = useUserStore();
    const props = defineProps({
        youBoxList: {
            type: Array,
            default: () => {
                return []
            }
        },
    })
    const emit = defineEmits([]);
    // 重点
    const state = reactive({
        list: [{
            name: '类型',
            max: '最大值',
            min: '最小值',
            agr: '平均值',
            unit: 'CH4%'
        }, {
            name: '氧气',
            max: 40,
            min: 20,
            agr: 10,
            unit: 'CH4%'
        }, {
            name: '一氧化碳',
            max: 40,
            min: 20,
            agr: 10,
            unit: 'CH4%'
        }, {
            name: '风量',
            max: 40,
            min: 20,
            agr: 10,
            unit: 'CH4%'
        }, {
            name: '激光甲烷',
            max: 40,
            min: 20,
            agr: 10,
            unit: 'CH4%'
        }, {
            name: '硫化氢',
            max: 40,
            min: 20,
            agr: 10,
            unit: 'CH4%'
        }, {
            name: '温度',
            max: 40,
            min: 20,
            agr: 10,
            unit: 'CH4%'
        }]
    })
    let youBoxData = computed(() => {
        console.log(props.youBoxList, "右侧的");

    })
</script>
<style lang="scss" scoped>
    .youBox {
        display: flex;
        justify-content: space-around;
        border: 1px solid rgba(64, 159, 255, 0.1);
        border-radius: 4px;
        background: rgba(255, 255, 255, 0.9);
        box-shadow: 0px 2px 12px rgba(33, 49, 66, 0.08);
        backdrop-filter: blur(4px);
        max-width: 1100px;

        .youBoxList {
            font-size: 14px;
            flex: 1;
            display: flex;
            flex-direction: column;

            span {
                height: 60px;
                white-space: nowrap;
                padding: 20px 20px;

                &:nth-child(1) {
                    background-color: rgba(68, 136, 255, 0.12);
                }
            }
        }
    }
</style>